<template>
  <view>
    <!-- 遁甲局的位置，遁甲局设计稿尺寸440px -->
    <cm-scale-view content-width="440" @finish="finishHandler">
      <view class="dunjia-content-wrapper" style="height: 440px;">
        
        <!-- 第一层 额外神煞层 -->
        <view class="dunjia-content-layer" v-if="dunjiaProxy.timeGod">
          <!-- 外圈第一圈，马星 -->
          <dunjia-extra divide="12" v-if="dunjiaProxy.timeGod" :extra-index="dunjiaProxy.timeGod.keyHorse.index">
            <view class="app-alert-color">马</view>
          </dunjia-extra>
          <!-- 外圈第一圈，空亡 -->
          <dunjia-extra divide="12" align="flex-start" v-if="dunjiaProxy.timeGod" :extra-index="dunjiaProxy.timeGod.keyEmpty[0]">〇</dunjia-extra>
          <dunjia-extra divide="12" align="flex-start" v-if="dunjiaProxy.timeGod" :extra-index="dunjiaProxy.timeGod.keyEmpty[1]">〇</dunjia-extra>
        </view>
        
        <!-- 第二层 九宫内容层，因为要背点选，所以覆盖在上面 -->
        <view class="dunjia-content-layer">
          <!-- 九宫本体 -->
          <view class="dunjia-content-palace" v-for="(item, index) in dunjiaProxy.palaces" :key="item.baseId"
            :style="[palacePos(index)]">
            <!-- 九宫边框 -->
            <view class="dunjia-content-palace-border" :class="[palaceBorder(index)]"></view>
            <!-- 九宫内容 -->
            <view class="dunjia-content-palace-ele" v-if="index !== 4">
              <view class="dunjia-content-palace-ele-line">
                <bagua-element
                  :cm-class="basicDiseaseClass(item, item.ele.god)"
                  size="14" :bagua="item.ele.god" sim-name
                  :season="seasonIndex" :compare-selected="compareSelected"
                  @click="elementClickHandler(item.ele.god)">
                </bagua-element>
              </view>
              <view class="dunjia-content-palace-ele-line">
                <view>
                  <bagua-element
                    :cm-class="basicDiseaseClass(item, item.ele.skyGan.gan)"
                    size="14" :bagua="item.ele.skyGan.gan"
                    :season="seasonIndex" :compare-selected="compareSelected"
                    @click="elementClickHandler(item.ele.skyGan.gan)"></bagua-element>
                  
                  <bagua-element
                    v-if="item.ele.skyExtraGan.gan"
                    :cm-class="basicDiseaseClass(item, item.ele.skyExtraGan.gan)"
                    size="14" :bagua="item.ele.skyExtraGan.gan"
                    :season="seasonIndex" :compare-selected="compareSelected"
                    @click="elementClickHandler(item.ele.skyExtraGan.gan)"></bagua-element>                    
                </view>
                
                <bagua-element
                  size="14" :bagua="item.ele.star" sim-name
                  :season="seasonIndex" :compare-selected="compareSelected"
                  @click="elementClickHandler(item.ele.star)"></bagua-element>
              </view>
              <view class="dunjia-content-palace-ele-line">
                <view>
                  <bagua-element
                    :cm-class="basicDiseaseClass(item, item.ele.groundGan.gan)"
                    size="14" :bagua="item.ele.groundGan.gan"
                    :season="seasonIndex" :compare-selected="compareSelected"
                    @click="elementClickHandler(item.ele.groundGan.gan)"></bagua-element>
                    
                  <bagua-element
                    v-if="item.ele.groundExtraGan.gan"
                    :cm-class="basicDiseaseClass(item, item.ele.groundExtraGan.gan)"
                    size="14" :bagua="item.ele.groundExtraGan.gan"
                    :season="seasonIndex" :compare-selected="compareSelected"
                    @click="elementClickHandler(item.ele.groundExtraGan.gan)"></bagua-element>
                </view>
                
                <bagua-element
                  :cm-class="basicDiseaseClass(item, item.ele.door)"
                  size="14" :bagua="item.ele.door" sim-name
                  :season="seasonIndex" :compare-selected="compareSelected"
                  @click="elementClickHandler(item.ele.door)"></bagua-element>
              </view>
            </view>
          </view>
          
          <!-- 外圈第一圈，隐干 -->
          <dunjia-extra divide="8" v-for="(item, index) in dunjiaProxy.palaces" :key="item.outerId" :extra-index="index">
            <view v-if="index !== 4">
              <bagua-element
                size="14" :bagua="item.ele.outGan"
                :season="seasonIndex" :compare-selected="compareSelected"
                @click="elementClickHandler(item.ele.outGan)"></bagua-element>
                
              <bagua-element
                v-if="item.ele.outExtraGan" size="14" :bagua="item.ele.outExtraGan"
                :season="seasonIndex" :compare-selected="compareSelected"
                @click="elementClickHandler(item.ele.outExtraGan)"></bagua-element>
            </view>
          </dunjia-extra>
          
          <!-- 外圈第二圈，十二地支 -->
          <dunjia-extra v-if="isZhiShow" layer="2" :divide="secondLayerDivide" v-for="(item, index) in secondLayerList" :key="item.baseId" :extra-index="index">
            <bagua-element
              v-if="!isPosDunjia" cm-class="app-theme-color" size="14" :bagua="item.ele.zhi"
              :season="seasonIndex" :compare-selected="compareSelected"
              @click="elementClickHandler(item.ele.zhi)"></bagua-element>
            
            <bagua-element
              v-else cm-class="app-theme-color" size="14" :bagua="item.ele.mountain"
              :season="seasonIndex" :compare-selected="compareSelected"
              @click="elementClickHandler(item.ele.mountain)"></bagua-element>
          </dunjia-extra>
          
          <!-- 外圈第三圈，外圈神煞 -->
          <dunjia-extra :layer="3 - layerOffset" :divide="outerGodProxy.divide" v-for="(item, index) in outerGodsList" :key="item.godId" :extra-index="index">
            <bagua-element
              v-if="item.ele[outerGodProxy.key]" size="14" :sim-name="outerGodProxy.isSim"
              :cm-class="(item.ele[outerGodProxy.key].isAlert ? 'app-alert-color ' : '') + (item.ele[outerGodProxy.key].isBold ? 'cm-bold ' : '')"
              :bagua="item.ele[outerGodProxy.key]"
              :season="seasonIndex" :compare-selected="compareSelected"
              @click="elementClickHandler(item.ele[outerGodProxy.key])"></bagua-element>
          </dunjia-extra>
          
          <view class="dunjia-content-taiyi-palace" v-show="isTaiyiShow"
            v-for="(item, index) in dunjiaProxy.taiyiPalaces" :key="item.baseId"
            :style="[taiyiPalacePos(index)]">
            <!-- 太乙宫边框 -->
            <view class="dunjia-content-taiyi-border" :class="[taiyiBorder(index)]"></view>
            <view class="dunjia-content-palace-ele">
              <view class="dunjia-content-palace-ele-line">
                <view class="app-theme-color">{{ item.taiyiNum }}</view>
                <bagua-element
                  cm-class="app-theme-color" size="14" :bagua="item.ele.taiyiGround"
                  :season="seasonIndex" :compare-selected="compareSelected"
                  @click="elementClickHandler(item.ele.taiyiGround)"></bagua-element>
                
                <bagua-element cm-class="app-theme-color" size="14" :bagua="item.ele.taiyiGround" sim-name></bagua-element>
              </view>
              <view class="dunjia-content-taiyi-ele-line">
                <bagua-element
                  :cm-class="item.ele.taiyiSky[0].name === '太乙' ? 'app-alert-color' : ''"
                  v-if="item.ele.taiyiSky.length >= 1" size="12" :bagua="item.ele.taiyiSky[0]" sim-name
                  :season="seasonIndex" :compare-selected="compareSelected"
                  @click="elementClickHandler(item.ele.taiyiSky[0])"></bagua-element>
                  
                <bagua-element
                  v-if="item.ele.taiyiSky.length >= 2" size="12" :bagua="item.ele.taiyiSky[1]" sim-name
                  :season="seasonIndex" :compare-selected="compareSelected"
                  @click="elementClickHandler(item.ele.taiyiSky[1])"></bagua-element>
              </view>
              <view class="dunjia-content-taiyi-ele-line">
                <bagua-element
                  v-if="item.ele.taiyiSky.length >= 3" size="12" :bagua="item.ele.taiyiSky[2]" sim-name
                  :season="seasonIndex" :compare-selected="compareSelected"
                  @click="elementClickHandler(item.ele.taiyiSky[2])"></bagua-element>
                
                <bagua-element
                  v-if="item.ele.taiyiSky.length === 4" size="12" :bagua="item.ele.taiyiSky[3]" sim-name
                  :season="seasonIndex" :compare-selected="compareSelected"
                  @click="elementClickHandler(item.ele.taiyiSky[3])"></bagua-element>
                <view v-if="item.ele.taiyiSky.length > 4">...</view>
              </view>
            </view>
          </view>
          
        </view>
        
      </view>
    </cm-scale-view>
  </view>
</template>

<script src="./dunjiaContent.js"></script>

<style lang="stylus">
@import './dunjiaContent.styl'
</style>
